<template>
  <div class="page-bill-detailo">
    <div class="page-bill-face">
      <div class="table-h2"><img src="../../../../../assets/images/logo_n.png" alt="">马力科技电子仓单</div>
      <div>
        <div class="table-header-left">仓单规范遵照：{{formData.wrStandard}}</div>
        <div class="table-header-center">签发时间：{{formData.signDateDisplay}}  &nbsp;&nbsp;&nbsp;&nbsp;有效状态：{{formData.isActiveDesc}}</div>
        <div class="table-header-right">NO：{{formData.wrNo}} </div>
      </div>
      <div class="table w50 border-r">
        <div class="table-row-group" >
          <ul class="table-row">
            <li class="table-cell border-r">存货人(单位)：{{formData.storerName}}</li>
            <li class="table-cell br0">存货人地址：{{formData.storerAddress}}</li>
          </ul>
        </div>
        <div class="table-row-group" >
          <ul class="table-row">
            <li class="table-cell">仓单持有人：{{formData.ownerName}}</li>
            <li class="table-cell br0">保管仓库地址：{{formData.storageAddress}}</li>
          </ul>
        </div>
        <div class="table-row-group" >
          <ul class="table-row">
            <li class="table-cell">仓储物损耗标准：{{formData.storageLossStandard}}</li>
            <li class="table-cell br0">仓储费率：{{formData.storageRate}}</li>
          </ul>
        </div>
      </div>
      <egrid  class="egrid-class goods-table" border
              :header-cell-style="getHeaderCellClass"
              :data="formData.wmsWrGoodsList"
              :columns="columns"
              :columns-schema="columnsSchema"
              :columns-props="columnsProps">
      </egrid>

      <div class="table mb-1">
        <div class="table-row-group" >
          <ul class="table-row">
            <li class="table-cell br0">哈希值：{{formData.hashValue}}</li>
          </ul>
        </div>
      </div>
      <div class="table">
        <div class="table-row-group" >
          <ul class="table-row">
            <li class="table-cell">交货人：{{formData.deliverer}}</li>
            <li class="table-cell">收货人：{{formData.receiver}}</li>
            <li class="table-cell br0">保管人（单位全称）：{{formData.storageCompanyName}}</li>

          </ul>
        </div>
      </div>
      <pc-dialog :is-show="isShowPicDialog"  title ='溯源文件' @on-close="isShowPicDialog = false">
        <div>
          <show-pic :headTitle="'溯源文件'"   :wmsWrTraceFileList="formData.wmsWrTraceFileList" :wmsWrGoodsFileList="formData.wmsWrGoodsFileList" :headSonTitle="'支持pdf,jpg,png,gif,bmp (最多选择1张)'" @closeEditPic="closeEditPic" >
          </show-pic>
        </div>
      </pc-dialog>
    </div>
    <el-row class="mt-20"><el-button type="primary" v-on:click="showPicFn">查看仓单溯源</el-button>
    </el-row>
    <div class="page-bill-back">
      <div class="table-h2"><img src="../../../../../assets/images/logo_n.png" alt="">马力科技电子仓单<span class="table-h2-t1">（背书联）</span></div>

      <div class="table">
        <div class="table-row-group" >
          <ul class="table-row title">
            <li class="table-cell">背书人签章</li>
            <li class="table-cell br0">背书人签章</li>
          </ul>
        </div>
        <div class="table-row-group" >
          <ul class="table-row">
            <li class="table-cell-height">
              <div class="bei-seal"><p class="p1"></p> <p class="p2"></p> <p class="p3"></p></div>
            </li>
            <li class="table-cell-height">
              <div class="bei-seal"><p class="p1"></p> <p class="p2"></p> <p class="p3"></p></div>
            </li>
          </ul>
        </div>
        <div class="table-row-group" >
          <ul class="table-row title">
            <li class="table-cell">保管人签章</li>
            <li class="table-cell br0">保管人签章</li>
          </ul>
        </div>
        <div class="table-row-group" >
          <ul class="table-row">
            <li class="table-cell-height">
              <div class="bei-seal"><p class="p1"></p> <p class="p2"></p> <p class="p3"></p></div>
            </li>
            <li class="table-cell-height">
              <div class="bei-seal"><p class="p1"></p> <p class="p2"></p> <p class="p3"></p></div>
            </li>
          </ul>
        </div>
        <div class="table-row-group" >
          <ul class="table-row title">
            <li class="table-cell ">被背书人签章</li>
            <li class="table-cell br0">被背书人签章</li>
          </ul>
        </div>
        <div class="table-row-group" >
          <ul class="table-row">
            <li class="table-cell-height">
              <div class="bei-seal"><p class="p1"></p> <p class="p2"></p> <p class="p3"></p></div>
            </li>
            <li class="table-cell-height">
              <div class="bei-seal"><p class="p1"></p> <p class="p2"></p> <p class="p3"></p></div>
            </li>
          </ul>
        </div>

      </div>
      <div  class="table-row-t1"  >
        签发时间：{{formData.signDateDisplay}}  &nbsp;&nbsp; &nbsp;&nbsp;    No：{{formData.wrNo}}
      </div>
    </div>
    <el-row class="mt-20 mb-50 text-center"><el-button  @click="getPdf()" type="primary">&nbsp;&nbsp;下载仓单&nbsp;&nbsp;</el-button></el-row>
    <div id="pdfDom">
      <div class="page-bill-face">
        <div class="table-h2"><img src="../../../../../assets/images/logo_n.png" alt="">马力科技电子仓单</div>
        <div>
          <div class="table-header-left">仓单规范遵照：{{formData.wrStandard}}</div>
          <div class="table-header-center">签发时间：{{formData.signDateDisplay}}   &nbsp;&nbsp;&nbsp;&nbsp;有效状态：{{formData.isActiveDesc}}</div>
          <div class="table-header-right">NO：{{formData.wrNo}} </div>
        </div>
        <div class="table w50 border-r">
          <div class="table-row-group" >
            <ul class="table-row">
              <li class="table-cell border-r">存货人(单位)：{{formData.storerName}}</li>
              <li class="table-cell br0">存货人地址：{{formData.storerAddress}}</li>
            </ul>
          </div>
          <div class="table-row-group" >
            <ul class="table-row">
              <li class="table-cell">仓单持有人：{{formData.ownerName}}</li>
              <li class="table-cell br0">保管仓库地址：{{formData.storageAddress}}</li>
            </ul>
          </div>
          <div class="table-row-group" >
            <ul class="table-row">
              <li class="table-cell">仓储物损耗标准：{{formData.storageLossStandard}}</li>
              <li class="table-cell br0">仓储费率：{{formData.storageRate}}</li>
            </ul>
          </div>
        </div>
        <egrid  class="egrid-class goods-table" border
                :header-cell-style="getHeaderCellClass"
                :data="formData.wmsWrGoodsList"
                :columns="columns"
                :columns-schema="columnsSchema"
                :columns-props="columnsProps">
        </egrid>

        <div class="table mb-1">
          <div class="table-row-group" >
            <ul class="table-row">
              <li class="table-cell br0">哈希值：{{formData.hashValue}}</li>
            </ul>
          </div>
        </div>
        <div class="table">
          <div class="table-row-group" >
            <ul class="table-row">
              <li class="table-cell">交货人：{{formData.deliverer}}</li>
              <li class="table-cell">收货人：{{formData.receiver}}</li>
              <li class="table-cell br0">保管人（单位全称）：{{formData.storageCompanyName}}</li>

            </ul>
          </div>
        </div>
      </div>
      <div class="page-bill-back">
        <div class="table-h2"><img src="../../../../../assets/images/logo_n.png" alt="">马力科技电子仓单<span class="table-h2-t1">（背书联）</span></div>

        <div class="table">
          <div class="table-row-group" >
            <ul class="table-row title">
              <li class="table-cell">背书人签章</li>
              <li class="table-cell br0">背书人签章</li>
            </ul>
          </div>
          <div class="table-row-group" >
            <ul class="table-row">
              <li class="table-cell-height">
                <div class="bei-seal"><p class="p1"></p> <p class="p2"></p> <p class="p3"></p></div>
              </li>
              <li class="table-cell-height">
                <div class="bei-seal"><p class="p1"></p> <p class="p2"></p> <p class="p3"></p></div>
              </li>
            </ul>
          </div>
          <div class="table-row-group" >
            <ul class="table-row title">
              <li class="table-cell">保管人签章</li>
              <li class="table-cell br0">保管人签章</li>
            </ul>
          </div>
          <div class="table-row-group" >
            <ul class="table-row">
              <li class="table-cell-height">
                <div class="bei-seal"><p class="p1"></p> <p class="p2"></p> <p class="p3"></p></div>
              </li>
              <li class="table-cell-height">
                <div class="bei-seal"><p class="p1"></p> <p class="p2"></p> <p class="p3"></p></div>
              </li>
            </ul>
          </div>
          <div class="table-row-group" >
            <ul class="table-row title">
              <li class="table-cell ">被背书人签章</li>
              <li class="table-cell br0">被背书人签章</li>
            </ul>
          </div>
          <div class="table-row-group" >
            <ul class="table-row">
              <li class="table-cell-height">
                <div class="bei-seal"><p class="p1"></p> <p class="p2"></p> <p class="p3"></p></div>
              </li>
              <li class="table-cell-height">
                <div class="bei-seal"><p class="p1"></p> <p class="p2"></p> <p class="p3"></p></div>
              </li>
            </ul>
          </div>

        </div>
        <div  class="table-row-t1"  >
          签发时间：{{formData.signDateDisplay}}  &nbsp;&nbsp; &nbsp;&nbsp;    No：{{formData.wrNo}}
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import InfoCategory from 'components/wms/comm/InfoCategory';
  import fileUpload from 'components/fileUpload/file.vue';
  import showPic from 'views/wms/dataquery/billlist/trace/showPicture.vue';
  import PcDialog from 'components/dialog';
  export default{
    props: {
      id: [String, Number]
    },
    components: {
      InfoCategory,
      showPic,
      fileUpload,
      PcDialog
    },
    data() {
      return {
        tableData: [],
        formData: [],
        isActive: true,
        isShowPicDialog: false,
        datas: {
          'code': 0,
          'message': 'string',
          'result': {
            'batchFiles': [
              {
                'fileClass': '1',
                'fileClassDisplay': '报关单',
                'fileType': '1',
                'goodsId': '70718532527787354985',
                'goodsName': '去骨牛西冷带侧边2.7',
                'id': '41008793548733880704',
                'name': '报关单KGW-483.jpg',
                'url': 'http://img.malicn.com/v1/tfs/T1mRxTB5WT1RXrhCrK.jpg',
                'urlM': 'http://img.malicn.com/v1/tfs_200_200/T1mRxTB5WT1RXrhCrK.jpg'
              }
            ],
            'cntrNo': 'CXRU1005851',
            'declarationFiles': [
              {
                'fileClass': '1',
                'fileClassDisplay': '报关单',
                'fileType': '1',
                'goodsId': '70718532527787354985',
                'goodsName': '去骨牛西冷带侧边2.7',
                'id': '41008793548733880704',
                'name': '报关单KGW-483.jpg',
                'url': 'http://img.malicn.com/v1/tfs/T1mRxTB5WT1RXrhCrK.jpg',
                'urlM': 'http://img.malicn.com/v1/tfs_200_200/T1mRxTB5WT1RXrhCrK.jpg'
              }
            ],
            'deliverer': '陈福斌',
            'hashValue': '48ef9d3a8166a542edcc5c575432f500a52ef3d3f8ba5a32f2bae1032d0ffde1',
            'id': 5149229893,
            'inspectionFiles': [
              {
                'fileClass': '1',
                'fileClassDisplay': '报关单',
                'fileType': '1',
                'goodsId': '70718532527787354985',
                'goodsName': '去骨牛西冷带侧边2.7',
                'id': '41008793548733880704',
                'name': '报关单KGW-483.jpg',
                'url': 'http://img.malicn.com/v1/tfs/T1mRxTB5WT1RXrhCrK.jpg',
                'urlM': 'http://img.malicn.com/v1/tfs_200_200/T1mRxTB5WT1RXrhCrK.jpg'
              }
            ],
            'ownerName': '河北康远清真食品股份有限公司',
            'receiver': '李涛',
            'signDate': '2018-11-01 00:00:00',
            'signDateDisplay': '2018-11-01 00:00',
            'storageAddress': '天津市东丽区航空路152号',
            'storageCompanyName': '马力仓储有限公司',
            'storageLossStandard': '0',
            'storageName': '马力天津标准仓',
            'storageRate': '按仓储协议约',
            'storerAddress': '深圳市南山区万海大厦C座202室',
            'storerName': '深圳天合供应链管理有限公司',
            'wmsWrGoodsFileList': [
              {
                'goodsId': '70718532527787354985',
                'goodsName': '去骨牛西冷带侧边2.7',
                'wmsWrFileList': [
                  {
                    'fileClass': '1',
                    'fileClassDisplay': '报关单',
                    'fileType': '1',
                    'goodsId': '70718532527787354985',
                    'goodsName': '去骨牛西冷带侧边2.7',
                    'id': '41008793548733880704',
                    'name': '报关单KGW-483.jpg',
                    'url': 'http://img.malicn.com/v1/tfs/T1mRxTB5WT1RXrhCrK.jpg',
                    'urlM': 'http://img.malicn.com/v1/tfs_200_200/T1mRxTB5WT1RXrhCrK.jpg'
                  },
                  {
                    'fileClass': '1',
                    'fileClassDisplay': '报关单1',
                    'fileType': '1',
                    'goodsId': '70718532527787354985',
                    'goodsName': '去骨牛西冷带侧边2.7',
                    'id': '41008793548733880704',
                    'name': '报关单KGW-483.jpg',
                    'url': 'http://img.malicn.com/v1/tfs/T1mRxTB5WT1RXrhCrK.jpg',
                    'urlM': 'http://img.malicn.com/v1/tfs_200_200/T1mRxTB5WT1RXrhCrK.jpg'
                  },
                  {
                    'fileClass': '1',
                    'fileClassDisplay': '报关单2',
                    'fileType': '1',
                    'goodsId': '70718532527787354985',
                    'goodsName': '去骨牛西冷带侧边2.7',
                    'id': '41008793548733880704',
                    'name': '报关单KGW-483.jpg',
                    'url': 'http://img.malicn.com/v1/tfs/T1mRxTB5WT1RXrhCrK.jpg',
                    'urlM': 'http://img.malicn.com/v1/tfs_200_200/T1mRxTB5WT1RXrhCrK.jpg'
                  }

                ]
              }
            ],
            'wmsWrGoodsList': [
              {
                'countryOrigin': '新西兰',
                'goodsId': '70718532527787354985',
                'goodsName': '去骨牛西冷带侧边2.7',
                'goodsValue': '98765432.01',
                'packageDisplay': '纸箱',
                'packageId': '64770327310129332802',
                'productDate': '2018-11-01 00:00:00',
                'productDateDisplay': '201811',
                'refAvgWeight': 1234.567809,
                'scanWeight': 12345678.09,
                'totalWeight': 98765432.01,
                'unit': '64770327310129332802',
                'unitDisplay': '件',
                'vendor': 'ME128',
                'wrGoodsId': 328285436063252540,
                'wrId': 383008061198732600,
                'wsStockNum': '9876543210'
              }
            ],
            'wmsWrTraceFileList': [
              {
                'fileClass': '1',
                'fileClassDisplay': '报关单',
                'wmsWrFileList': [
                  {
                    'fileClass': '1',
                    'fileClassDisplay': '报关单',
                    'fileType': '1',
                    'goodsId': '70718532527787354985',
                    'goodsName': '去骨牛西冷带侧边2.7',
                    'name': '报关单KGW-483.jpg',
                    'url': 'http://img.malicn.com/v1/tfs/T1mRxTB5WT1RXrhCrK.jpg',
                    'urlM': 'http://img.malicn.com/v1/tfs_200_200/T1mRxTB5WT1RXrhCrK.jpg',
                    'wrFilesId': '41008793548733880704'
                  },
                  {
                    'fileClass': '1',
                    'fileClassDisplay': '报关单',
                    'fileType': '1',
                    'goodsId': '70718532527787354985',
                    'goodsName': '去骨牛西冷带侧边2.7',
                    'name': '报关单KGW-483.jpg',
                    'url': 'http://img.malicn.com/v1/tfs/T1mRxTB5WT1RXrhCrK.jpg',
                    'urlM': 'http://img.malicn.com/v1/tfs_200_200/T1mRxTB5WT1RXrhCrK.jpg',
                    'wrFilesId': '41008793548733880704'
                  },
                  {
                    'fileClass': '1',
                    'fileClassDisplay': '报关单',
                    'fileType': '1',
                    'goodsId': '70718532527787354985',
                    'goodsName': '去骨牛西冷带侧边2.7',
                    'name': '报关单KGW-483.jpg',
                    'url': 'http://img.malicn.com/v1/tfs/T1mRxTB5WT1RXrhCrK.jpg',
                    'urlM': 'http://img.malicn.com/v1/tfs_200_200/T1mRxTB5WT1RXrhCrK.jpg',
                    'wrFilesId': '41008793548733880704'
                  }
                ]
              },
              {
                'fileClass': '2',
                'fileClassDisplay': '报关单',
                'wmsWrFileList': [
                  {
                    'fileClass': '2',
                    'fileClassDisplay': '报关单',
                    'fileType': '1',
                    'goodsId': '70718532527787354985',
                    'goodsName': '去骨牛西冷带侧边2.7',
                    'name': '报关单KGW-483.jpg',
                    'url': 'http://img.malicn.com/v1/tfs/T1mRxTB5WT1RXrhCrK.jpg',
                    'urlM': 'http://img.malicn.com/v1/tfs_200_200/T1mRxTB5WT1RXrhCrK.jpg',
                    'wrFilesId': '41008793548733880704'
                  },
                  {
                    'fileClass': '2',
                    'fileClassDisplay': '报关单',
                    'fileType': '1',
                    'goodsId': '70718532527787354985',
                    'goodsName': '去骨牛西冷带侧边2.7',
                    'name': '报关单KGW-483.jpg',
                    'url': 'http://img.malicn.com/v1/tfs/T1mRxTB5WT1RXrhCrK.jpg',
                    'urlM': 'http://img.malicn.com/v1/tfs_200_200/T1mRxTB5WT1RXrhCrK.jpg',
                    'wrFilesId': '41008793548733880704'
                  }
                ]
              }
            ],
            'wrNo': 'ML17071800001',
            'wrStandard': 'GB/T 30332-2013'
          }
        },
        wmsWrTraceFileList: [
          {
            'fileClass': '1',
            'fileClassDisplay': '报关单',
            'wmsWrFileList': [
              {
                'fileClass': '1',
                'fileClassDisplay': '报关单',
                'fileType': '1',
                'goodsId': '70718532527787354985',
                'goodsName': '去骨牛西冷带侧边2.7',
                'name': '报关单KGW-483.jpg',
                'url': 'http://img.malicn.com/v1/tfs/T1mRxTB5WT1RXrhCrK.jpg',
                'urlM': 'http://img.malicn.com/v1/tfs_200_200/T1mRxTB5WT1RXrhCrK.jpg',
                'wrFilesId': '41008793548733880704'
              },
              {
                'fileClass': '1',
                'fileClassDisplay': '报关单',
                'fileType': '1',
                'goodsId': '70718532527787354985',
                'goodsName': '去骨牛西冷带侧边2.7',
                'name': '报关单KGW-483.jpg',
                'url': 'http://img.malicn.com/v1/tfs/T1mRxTB5WT1RXrhCrK.jpg',
                'urlM': 'http://img.malicn.com/v1/tfs_200_200/T1mRxTB5WT1RXrhCrK.jpg',
                'wrFilesId': '41008793548733880704'
              },
              {
                'fileClass': '1',
                'fileClassDisplay': '报关单',
                'fileType': '1',
                'goodsId': '70718532527787354985',
                'goodsName': '去骨牛西冷带侧边2.7',
                'name': '报关单KGW-483.jpg',
                'url': 'http://img.malicn.com/v1/tfs/T1mRxTB5WT1RXrhCrK.jpg',
                'urlM': 'http://img.malicn.com/v1/tfs_200_200/T1mRxTB5WT1RXrhCrK.jpg',
                'wrFilesId': '41008793548733880704'
              }
            ]
          },
          {
            'fileClass': '2',
            'fileClassDisplay': '报关单',
            'wmsWrFileList': [
              {
                'fileClass': '2',
                'fileClassDisplay': '报关单',
                'fileType': '1',
                'goodsId': '70718532527787354985',
                'goodsName': '去骨牛西冷带侧边2.7',
                'name': '报关单KGW-483.jpg',
                'url': 'http://img.malicn.com/v1/tfs/T1mRxTB5WT1RXrhCrK.jpg',
                'urlM': 'http://img.malicn.com/v1/tfs_200_200/T1mRxTB5WT1RXrhCrK.jpg',
                'wrFilesId': '41008793548733880704'
              },
              {
                'fileClass': '2',
                'fileClassDisplay': '报关单',
                'fileType': '1',
                'goodsId': '70718532527787354985',
                'goodsName': '去骨牛西冷带侧边2.7',
                'name': '报关单KGW-483.jpg',
                'url': 'http://img.malicn.com/v1/tfs/T1mRxTB5WT1RXrhCrK.jpg',
                'urlM': 'http://img.malicn.com/v1/tfs_200_200/T1mRxTB5WT1RXrhCrK.jpg',
                'wrFilesId': '41008793548733880704'
              }
            ]
          }
        ],
        'wmsWrGoodsFileList': [
          {
            'goodsId': '70718532527787354985',
            'goodsName': '去骨牛西冷带侧边2.7',
            'wmsWrFileList': [
              {
                'fileClass': '1',
                'fileClassDisplay': '报关单',
                'fileType': '1',
                'goodsId': '70718532527787354985',
                'goodsName': '去骨牛西冷带侧边2.7',
                'id': '41008793548733880704',
                'name': '报关单KGW-483.jpg',
                'url': 'http://img.malicn.com/v1/tfs/T1mRxTB5WT1RXrhCrK.jpg',
                'urlM': 'http://img.malicn.com/v1/tfs_200_200/T1mRxTB5WT1RXrhCrK.jpg'
              }
            ]
          }
        ],

        contentClass: ['content-class'],
        columnsSchema: {
//          '订单号' : { minWidth: 100},
//          '操作': { fixed: 'right' }
        },
        // columnsProps 用于定义所有 columns 公共的属性，
        // 这里属性可以参考这里： http://element.eleme.io/#/zh-CN/component/table#table-column-attributes
        columnsProps: {
          height: 40,
          align: 'center',
          showOverflowTooltip: true
        },
        columns: [
          {
            label: '仓储物名称',
            prop: 'goodsName'
          },
          {
            label: '生产厂家',
            prop: 'vendor'
          },
          {
            label: '原产地',
            prop: 'countryOrigin'
          },
          {
            label: '包装',
            prop: 'packageDisplay'
          },
          {
            label: '生产日期',
            prop: 'productDateDisplay'
          },
          {
            label: '数量',
            prop: 'wsStockNum'
          },
          {
            label: '单位',
            prop: 'unitDisplay'
          },
          {
            label: '总重量(kg)',
            prop: 'totalWeight'
          }
        ],
        storeageCols: [
          {
            label: '冷库名称',
            prop: 'storageName'
          },
          {
            label: '仓库地址',
            prop: 'storageAddress'
          },
          {
            label: '联系人姓名',
            prop: 'storageContact'
          },
          {
            label: '联系人电话',
            prop: 'storageContactPhone'
          }
        ],
        storageList: [{
          storageName: '',
          storageAddress: '',
          storageContact: '',
          storageContactPhone: ''
        }],
        orderId: this.id,
        showGoodsTable: false, // 是否显示货物的表格数据
        showStorageTable: false // 是否显示仓库的表格数据
      };
    },
    created() {
      this.initData();
    },
    computed: {
      htmlTitle () {
        return this.formData.wrNo;
      }
    },
    methods: {
      // 根据找库订单ID获取找库订单的详细数据
      initData() {
        this.ajax({
          url: '/maliwms/wr/wrDetail/' + this.orderId,
          type: 'GET',
          //    data: {},
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            this.formData = res.result;
          }
        });
      },
      // 关闭唛头抽检编辑
      closeEditPic() {
        this.isShowPicDialog = false;
      },
      showPicFn() {
        if (this.formData) {
          this.isShowPicDialog = true;
        }
      },
      // 定义表头的样式
      getHeaderCellClass({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background: #ffffff; height: 50px';
        } else {
          return '';
        }
      }
    }
  };
</script>
<style>
  .page-bill-detailo {
    width: 958px;
  }
  .page-bill-detailo .base-info {
    height: auto;
    border-top: 1px solid #e5e5e5;
    border-left: 1px solid #e5e5e5;
    background-color: white
  }

  .page-bill-detailo .base-info .title-class {
    display: block;
    width: auto;
    text-align: left;
    box-sizing: border-box;
    font-size: 16px !important;
    padding-left: 20px;
    color: #666666;
  }

  .page-bill-detailo .base-info .content-class {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .page-bill-detailo .base-info .base-single {
    width: 33.33%;
    height: 100px;
    padding-left: 20px;
    vertical-align: middle;
    display: inline-block;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
  }

  .page-bill-detailo .base-info .label-class {
    width: 100%;
    box-sizing: border-box;
    font-size: 14px !important;
    color: #808080;
    vertical-align: middle;
    text-align: left;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .page-bill-detailo .base-info .value-class {
    width: 100%;
    box-sizing: border-box;
    color: #1a1a1a;
    vertical-align: middle;
    text-align: left;
  }

  .page-bill-detailo .egrid-class {
    margin-bottom: 0px;
  }

  .page-bill-detailo .text-div {
    width: 958px;
    height: auto;
    margin-top: 20px;
    padding-bottom: 24px;
    border: 1px solid #e5e5e5;
    background-color: white;
  }

  .page-bill-detailo .text-div .text-class {
    margin-top: 20px;
    margin-left: 20px;
    color: #333333;
  }

  .page-bill-detailo .maliiconfont {
    color: #ff6c2b;
  }
  .page-bill-detailo .goods-title {
    padding-left: 20px;
    height: 50px;
    line-height: 50px;
    width: 100%;
    margin-top: 20px;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    border-top: 1px solid #333;
    background: white
  }
  .table{
    display:table;
    border-collapse:collapse;
    border:1px solid #333;
    width:100%;
    background:#FFFFFF;
  }
  .table-caption{
    display:table-caption;
    margin:0;
    padding:0;
    font-size:16px;
  }
  .table-header-left{
    margin:0px;
    padding: 0px;
    float: left;
    width: 32%;
    height: 40px;
    line-height: 40px;
    padding-left: 2px;
    text-align: left;
    border: 0px;
  }
  .table-header-center{
    margin:0px;
    padding: 0px;
    float: left;width: 34%;
    height: 40px;
    line-height: 40px;
    padding-left: 2px;
    text-align: center;
    border: 0px;
  }
  .table-header-right{
    margin:0px;
    padding: 0px;
    float: left;
    width: 33%;
    height: 40px;
    line-height: 40px;
    padding-right: 2px;
    text-align: right;
    border: 0px;
    font-weight: bold;
    font-size: 14px;
  }
  .table-column{
    display:table-column;
    width:100px;
  }
  .table-row-group{
    display:table-row-group;
    width: 100%;
    border-top: 1px solid #333;
    border-left:1px solid #333;
  }
  .table-row{
    display:table-row;
    height: 40px;
    width: 50%;
  }
  .table-row-group .table-row:hover,.table-footer-group .table-row:hover{
    background:#f6f6f6;
    width: 50%;
  }
  .table-cell{
    display:table-cell;
    padding:0 5px;
    border-right:1px solid #333;
    /*border-bottom:1px solid #333;*/
    height: 40px;
    line-height: 40px;
    text-indent: 20px;
  }
  .table-cell-height{
    display:table-cell;
    padding:0 5px;
    /*border:1px solid #333333;*/
    height: 150px;
    line-height: 40px;
  }
  .table-header-group{
    display:table-header-group;
    background:#FFFFFF;
    font-weight:bold;
  }
  .table-row-t1{
    height: 40px;
    line-height: 40px;
    padding-left: 5px;
    background: #e3e4e6;
    border:1px solid #333;
    margin-top:-1px;
    margin-bottom:20px;
  }
  .table-h2{
    text-align: center;
    font-size: 22px!important;;
    font-weight: bold!important;;
    height: 60px;
    line-height: 60px;
  }
  .table-h2 img{
    margin-right: 6px;
    vertical-align: middle;
    margin-top: -4px;
    display: inline-block;
  }
  .table-h2-t1{
    font-size: 18px!important;
    height: 60px;
    line-height: 60px;
    font-weight: bold!important;;
  }
  .page-bill-face{
    width: 957px;
    border: 1px solid #333333;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 20px 30px 20px;
    background-color: #fff;
    margin-top: 20px;
  }

  .page-bill-detailo .el-table th.is-leaf{
    border-color:#333;
  }
  .page-bill-detailo .el-table--border{
    border-color:#333;
  }
  .page-bill-detailo .el-table.egrid{
    margin-top:-1px;
    border-right:1px solid #333;
  }
  .page-bill-detailo .mb-1{
    margin-bottom:-1px;
  }
  .page-bill-detailo .goods-table .el-table__header{

  }
  .page-bill-detailo .goods-table  th.is-leaf{
    background-color:#e3e4e6!important;
    height: 0!important;
  }
  .page-bill-detailo .goods-table .el-table__empty-block{
    min-height: 40px;
  }
  .page-bill-detailo .mt-20{
    margin-top:20px;
  }
  .page-bill-back{
    width: 959px;
    border: 1px solid #333333;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 20px 30px 20px;
    background-color: #fff;
    margin-top: 30px;
    margin-bottom:30px;
  }
  .page-bill-back .bei-seal {
    position: relative;
    height: 130px;
  }
  .page-bill-back .bei-seal .p1 {
    position: absolute;
    font-size: 16px!important;
    left: 11px;
    top: 53px;
  }
  .page-bill-back .bei-seal .p2 {
    position: absolute;
    bottom: 30px;
    right: 25px;
  }
  .page-bill-back .bei-seal .p3 {
    position: absolute;
    bottom: 12px;
    right: 25px;
  }
  .page-bill-back .table-cell-height{
    height:140px;
  }
  .table-row.title{
    background:#e3e4e6;
  }
  .page-bill-detailo .el-table--border td{
    border-right:1px solid #333;
    border-bottom: 1px solid #333;
  }
  .page-bill-detailo .table.w50 ul li{
    width:470px;
    box-sizing: border-box;
  }
  .page-bill-detailo .el-table--border td div{
    color:#000;
  }
  .mb-50{
    margin-bottom: 50px;
  }
  .text-center{
    text-align:center;
  }
  #pdfDom{
    padding:16px;
    position:fixed;
    top:0;
    right:-2000px;
  }
  #pdfDom .page-bill-face{
    margin-bottom:50px;
  }
  .page-bill-back .table-row.title{
    border-top:1px solid #333;
    border-left:1px solid #333;
  }
  .page-bill-back .table-cell-height{
    border-right:none;
    border-bottom:none;
  }
  .br0{
    border-right:none;
  }
  .page-bill-face .table-row{

  }
  .page-bill-face .table.w50 .table-row .table-cell:first-child{
    border-right:none;
  }
  .page-bill-face .table.w50.border-r{
    position: relative;
  }
  .page-bill-face .table.w50.border-r:after{
    content: '';
    position: absolute;
    top: 0;
    left: 453px;
    width: 4px;
    height: 124px;
    border-right: 1px solid #333;
  }
  .page-bill-back{
    position: relative;
  }
  .page-bill-back:before{
    content: '';
    position: absolute;
    top: 70px;
    left: 477px;
    width: 3px;
    height: 544px;
    border-right: 1px solid #333;
  }
  .page-bill-back .table-cell{
    border-right:none;
  }
  .page-bill-back .table-row-group .table-row .table-cell-height{
    border-right:none;
  }
</style>
